<template>
  <div>
    <!-- 面包屑导航区域 -->
    <bread-crumb :breadContent="breadContent"></bread-crumb>
    <!-- 卡片视图区域 -->

    <!-- tab 页签区域 -->
    <el-tabs v-model="activeName" @tab-click="shiftTabs" type="border-card">
      <el-tab-pane
        v-for="item in warehouseList"
        :key="item.warehouseId"
        :label="item.warehouseName"
        :name="item.warehouseId"
      >
        <el-row>
          <el-col :span="20">
            <el-form ref="logForm" :model="logForm" label-width="80px">
              <!-- 多选框 -->
              <div style="margin-bottom: 20px">
                <el-checkbox-group
                  v-model="logForm.checkedspecialLine"
                  size="medium"
                >
                  <el-checkbox-button
                    v-for="sp in item.specialLines"
                    :label="sp.specialLineName"
                    :key="sp.specialLineId"
                    border
                    >{{ sp.specialLineName }}</el-checkbox-button
                  >
                  <el-checkbox-button border @change="selectAll"
                    >全选</el-checkbox-button
                  >
                </el-checkbox-group>
              </div>
            </el-form>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click="searchLog"
              >搜索</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <!-- 日志列表区域 -->
          <el-table
            :data="recordList"
            row-key="id"
            :border="false"
            :cell-class-name="tableRowClassName"
            :tree-props="{ children: 'children' }"
            :max-height="pageHeight - 50"
          >
            <el-table-column label="工单" align="center">
              <el-table-column
                label="记录类型"
                sortable
                width="100"
                prop="type"
              />
              <el-table-column
                label="申请用户"
                sortable
                width="100"
                prop="userName"
              />
              <el-table-column label="出入库情况" prop="message" />
            </el-table-column>

            <el-table-column label="物料" align="center">
              <el-table-column
                label="名称"
                prop="materialName"
                align="center"
                width="400"
              />
              <el-table-column
                label="状态"
                align="center"
                prop="status"
                width="80"
              />
            </el-table-column>
            <el-table-column label="物料数量" prop="count" width="80" />
            <el-table-column label="分类类型" prop="categoryName" />
            <el-table-column
              label="工单时间"
              sortable
              align="center"
              prop="createTime"
            />
          </el-table>
        </el-row>
      </el-tab-pane>

      <!-- 分页区域 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      /> -->

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryInfo.page"
        :limit.sync="queryInfo.size"
        @pagination="searchLog"
      />
    </el-tabs>
    <br />
  </div>
</template>

<script>

export default {
  data () {
    return {
      breadContent: ["日志管理", "日志信息"],
      // 查询条件
      queryInfo: {
        page: 1,
        size: 10
      },
      // 商品分类的数据列表，默认为空
      total: 0,
      warehouseList: {},
      recordList: undefined,
      specialLines: [],
      activeName: '',
      logForm: {
        checkedspecialLine: []
      }
    }
  },
  created () {
    console.log(this.activeName)
    this.listSpecialLine()
  },
  methods: {
    selectAll () {
      console.log(this.logForm.checkedspecialLine)
      console.log(this.specialLines)
      if (this.logForm.checkedspecialLine.length !== this.specialLines.length) {
        this.logForm.checkedspecialLine = this.specialLines.map(e => e.specialLineName)
      } else {
        this.logForm.checkedspecialLine = []
      }
    },
    async listSpecialLine () {
      const { data: res } = await this.$http.get('warehouse/list/label')
      if (res.status !== 200) {
        return this.$message.error('获取专业线标签失败！')
      }
      console.log(res.data)

      this.warehouseList = res.data
      if (this.activeName === '0') {
        var defaultWarehouse = this.warehouseList[0]
        this.activeName = defaultWarehouse.warehouseId
        this.specialLines = defaultWarehouse.specialLines
      }

      console.log(this.specialLines)
    },
    tableRowClassName ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 3 && columnIndex < 6) {
        if (row.children !== null) {
          if (row.children.length > 0) {
            // return 'warning-row'
          }
        } else {
          return 'success-row'
        }
      }
      return 'none-border'
    },
    // 切换标签
    shiftTabs () {
      // console.log(this.activeName)
      // this.cateData.forEach(item => console.log(item.id))
      // var temp = this.cateData.filter(item => item.id === this.activeName)[0]
      // this.cateList = temp.children != null ? temp.children : []
      // this.total = this.cateList.length
    },

    // 监听 size 改变
    // handleSizeChange (newSize) {
    //   this.queryInfo.size = newSize
    //   this.searchLog()
    // },
    // 监听 page 改变
    // handleCurrentChange (newPage) {
    //   this.queryInfo.page = newPage
    //   this.searchLog()
    // },
    // async listwarehouseList () {
    //   const { data: res } = await this.$http.get('warehouse/names')

    //   if (res.status !== 200) {
    //     return this.$message.error('获取仓库列表失败！')
    //   }
    //   this.warehouseList = res.data
    // },
    async searchLog () {
      console.log(this.logForm.checkedspecialLine)
      const { data: res } = await this.$http.get('record/tree', {
        params: {
          page: this.queryInfo.page,
          size: this.queryInfo.size,
          warehouseId: this.activeName,
          specialLines: this.logForm.checkedspecialLine.toString()
        }
      })

      if (res.status !== 200) {
        this.recordList = undefined
        return this.$message.error(res.meta.message)
      }

      // console.log(res.data)
      this.recordList = res.data.records
      this.total = res.data.total
    }
  }
}
</script>

<style lang="less" >
.treeTable {
  margin-top: 15px;
}

.el-cascader {
  width: 100%;
}
.el-table .warning-row {
  background: oldlace;
  border-left: none;
  border-right: none;
}

.el-table .success-row {
  background: #f0f9eb;
  border-left: none;
  border-right: none;
}
.el-table .none-border {
  border-left: none;
  border-right: none;
}
</style>
